<template>
    <view>
        <view class="body">
            <view v-if="showOne" class="po_r" style="background-image: url(https://img2.imgtp.com/2024/05/09/LNRFjWM7.jpg); background-size: cover; height: calc(100vh - 48px)">
                <view class="po_a f fpj fac gradient-text tracking-in-expand-fwd" style="width: 72vw; top: 200rpx; left: 14vw; height: 200rpx; text-align: justify">
                    <!-- <text class="">organic</text> -->
                    <view>O</view>
                    <view>R</view>
                    <view>G</view>
                    <view>A</view>
                    <view>N</view>
                    <view>I</view>
                    <view>C</view>
                </view>
                <view class="po_a f fpj fac text-xl text-tea" style="width: 70vw; top: 300rpx; left: 15vw; height: 200rpx">
                    <view>宝</view>
                    <view>山</view>
                    <view>产</view>
                    <view>宝</view>
                    <view>茶</view>
                </view>
                <view class="po_a f fpj fac gradient-text" style="width: 50vw; top: 425rpx; left: 25vw; height: 200rpx; text-align: justify">
                    <view>T</view>
                    <view>E</view>
                    <view>A</view>
                </view>
                <view class="po_a" style="width: 55vw; top: calc(100vh - 350rpx - 48px); left: 5vw; height: 350rpx; z-index: 11">
                    <image class="fill" src="https://img2.imgtp.com/2024/05/12/4CGCApJb.jpg"></image>
                    <view class="po_a f fv bg4 fill padding-lg" style="z-index: 12">
                        <view class="f text-white width_2">Organic Tea</view>
                        <view class="title f text-white width_2">有机茶</view>
                        <view class="f fac fpc text-white" style="width: 70%">每年2月下旬至4月下旬采摘单芽至一芽一叶的嫩梢</view>
                    </view>
                </view>
                <view class="po_a light bg-grey" style="width: 75vw; top: calc(100vh - 470rpx - 48px); right: 0; height: 470rpx">
                    <view class="po_a" style="top: -100rpx; left: 40rpx; width: 200rpx; height: 200rpx">
                        <image class="fill" src="https://img2.imgtp.com/2024/05/09/kMGsfyFn.jpg"></image>
                    </view>
                    <view class="po_a text-tea tracking-in-expand-fwd" style="width: 250rpx; top: 120rpx; right: 20rpx; z-index: 10; font-weight: 800; font-size: 40rpx">
                        大自然的清香
                        <view>滋味鲜醇2</view>
                    </view>
                </view>
                <view class="po_a light bg-grey f fac" style="width: 100vw; top: 100vh; right: 0; height: 200rpx">下拉更多精彩</view>
            </view>
            <view v-else :class="!showOne ? 'slide-top' : ''" style="top: 0">
                <view v-if="!showOne" class="f fpc">
                    <view class="searchBox f fpj fac" @tap="toSearch">
                        <view>搜索建议</view>
                        <view class="f fv fac">
                            <image class="icon_s" src="/static/search.png" mode="aspectFill"></image>
                        </view>
                    </view>
                </view>
                <view class="lunbo">
                    <swiper style="height: 250px" :autoplay="true" indicator-active-color="white" :indicator-dots="true">
                        <block v-for="(item, index) in list" :key="index">
                            <swiper-item>
                                <image :src="item" style="width: 100%"></image>
                            </swiper-item>
                        </block>
                    </swiper>
                </view>
                <view>
                    <!-- <notice></notice> -->
                    <!-- <view class="f fpj p10"> style="border-radius: 20px 20px 0 0;background-color: red;"
      <view class="title2">名茶简介</view>
    </view> -->
                    <view class="f fpj fw p10">
                        <view class="padding-l radius shadow shadow-lg bg-white photo po_r margin-bottom-sm f fac fpc width_3">
                            <image class="fill" src="https://img2.imgtp.com/2024/05/08/i7zXKY6q.jpg"></image>
                            <view class="title po_a f fac fpc fill bg1 text-white" @tap="toDetil" data-i="明前翠芽">- 明前翠芽 -</view>
                        </view>
                        <view class="padding-l radius shadow shadow-lg bg-white photo po_r f fac fpc width_3">
                            <image class="fill" src="https://img2.imgtp.com/2024/05/08/XZ7SUqM1.jpg"></image>
                            <view class="title po_a f fac fpc fill bg2 text-white" @tap="toDetil" data-i="明前毛峰">- 明前毛峰 -</view>
                        </view>
                        <view class="padding-l radius shadow shadow-lg bg-white photo po_r f fac fpc width_3">
                            <image class="fill" src="https://img2.imgtp.com/2024/05/09/LNRFjWM7.jpg"></image>
                            <view class="title po_a f fac fpc fill bg3 text-white" @tap="toDetil" data-i="明前毛尖">- 明前毛尖 -</view>
                        </view>
                        <view class="padding-l radius shadow shadow-lg bg-white photo po_r f fac fpc width_2">
                            <image class="fill" src="https://img2.imgtp.com/2024/05/08/yy7VRDAx.jpg"></image>
                            <view class="title po_a f fac fpc fill bg4 text-white" @tap="toDetil" data-i="明前白茶">- 明前白茶 -</view>
                        </view>
                        <view class="padding-l radius shadow shadow-lg bg-white photo po_r f fac fpc width_2">
                            <image class="fill" src="https://img2.imgtp.com/2024/05/09/3IWeRiRa.jpg"></image>
                            <view class="title po_a f fac fpc fill bg5 text-white" @tap="toDetil" data-i="明前遵义红">- 明前遵义红 -</view>
                        </view>
                    </view>
                    <view class="f fv" style="border-radius: 10px">
                        <view class="f fpj p10">
                            <view class="title2">精品推荐</view>
                            <view class="font_s" @tap="toMore">更多 ></view>
                        </view>

                        <view class="f fpj list">
                            <view class="list_item f fv radius shadow-warp bg-white" v-for="(item, index) in jplist" :key="index">
                                <image :src="item.img" style="height: 200rpx" mode="widthFix" :data-i="item" @tap="goDetail"></image>

                                <view class="f margin-sm text-black" :data-i="item" @tap="goDetail">{{ item.name }}</view>

                                <view v-if="index <= 2" id="shopcar" class="f fpj describe padding-lr-sm">
                                    <text class="text-price text-orange" :data-i="item" @tap="goDetail">{{ item.price }}</text>
                                    <view
                                        @tap="addshopcar"
                                        :data-i="item"
                                        :data-idx="index"
                                        class="cuIcon-cartfill text-orange btn_c f fac fpc shopcar margin-bottom-xs"
                                        :animation="anim[index]"
                                        :id="'img' + index"
                                    ></view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <cover-view class="f fv dengji">
            <cover-image src="/static/phone.png" @tap="toCall"></cover-image>
        </cover-view>
        <!-- <cover-view id="dengji">
    <cover-view class="{{click? 'cover cuIcon-comment bg-grey scale-down-br' : 'cover cuIcon-comment bg-grey scale-down-br2'}}" bindtap="toCall" style="font-size: 22px;"></cover-view>
    <cover-view class="{{click? 'bg-grey scale-down-br2 menu padding-sm' : 'bg-grey scale-down-br menu  padding-sm'}}" style="height: 60px;width: 500rpx;">
      <block wx:if="{{click}}">
        <cover-view class="width_3 f fac"><view class="f fac fpc icon_s cuIcon-home margin-right-xs" style="font-size: 22px;"></view><text>首页</text></cover-view>
      <cover-view class="width_3 f fac"><view class="f fac fpc icon_s cuIcon-apps margin-right-xs" style="font-size: 22px;"></view><text>分类</text></cover-view>
      <cover-view class="width_3 f fac"><view class="f fac fpc icon_s cuIcon-group_fill margin-right-xs" style="font-size: 22px;"></view><text>关于我们</text></cover-view>
      <cover-view class="width_3 f fac" bindtap="toCall"><view class="cuIcon-roundclose margin-right-xs" style="font-size: 22px;"></view>关闭</cover-view>
      </block>
    </cover-view>
</cover-view> -->
    </view>
</template>

<script>
// import notice from '../components/notice';
var app = getApp(); //全局购物车数量
export default {
    // components: {
    //     notice
    // },
    data() {
        return {
            list: [
                'https://img2.imgtp.com/2024/05/08/i7zXKY6q.jpg',
                'https://img2.imgtp.com/2024/05/08/XZ7SUqM1.jpg',
                '/static/lunbo1.jpg',
                'https://img2.imgtp.com/2024/05/08/yy7VRDAx.jpg'
            ],

            jplist: [
                {
                    img: 'https://img2.imgtp.com/2024/05/08/iWTES1kj.jpg',
                    name: '九五至尊',
                    price: 999,
                    buyNum: 1,
                    checked: true
                },
                {
                    img: 'https://img2.imgtp.com/2024/05/08/5n6My6nh.jpg',
                    name: '遵义红',
                    price: 666,
                    buyNum: 1,
                    checked: true
                },
                {
                    img: 'https://img2.imgtp.com/2024/05/08/d1Ev6Zjh.jpg',
                    name: '湄潭翠芽',
                    price: 888,
                    buyNum: 1,
                    checked: true
                }
            ],

            click: false,

            //购物车x坐标
            dsttop: 0,

            //购物车y坐标
            dstleft: 0,

            //商品记数
            count: 0,

            //每个元素上都创建一个animation对象
            anim: [],

            //初次进入显示海报
            showOne: true,

            loading: false,
            anistr: ''
        };
    },
    onShow() {
        //页面滑动至顶部
        uni.pageScrollTo({
            scrollTop: 0
        });
        // 全局变量 显示购物车数量
        // if (typeof this.getTabBar === 'function' &&
        //   this.getTabBar()) {
        //   this.getTabBar().setData({
        //     selected: 0
        //   })
        // }
    },
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {
        //  上拉时页面滑动位置
        if (this.showOne) {
            uni.pageScrollTo({
                scrollTop: 0
            });
        }
		this.showOne = false
        //  骨架屏
        // setTimeout(() => {
        //   this.setData({
        //     loading: false
        //   })
        // }, 3000)
        var that = this;
        var arr = [];
        for (var i = 0; i < 19; i++) {
            var ani = uni.createAnimation({
                duration: 300,
                timingFunction: 'linear'
            }); //动画时长300毫秒，从从头到尾速度一致
            arr.push(ani);
        }
		this.anim = arr
        //获取购物车坐标
        uni.createSelectorQuery()
            .in(uni)
            .select('#shopcar')
            .boundingClientRect(function (res) {
                that.setData({
                    dsttop: res.top,
                    dstleft: res.left
                });
            })
            .exec();
    },
    onReady() {
        this.setData({
            showOne: true
        });
    },
    onLoad() {},
    //分享给好友
    onShareAppMessage() {
        const promise = new Promise((resolve) => {
            setTimeout(() => {
                resolve({
                    imageUrl: 'https://img2.imgtp.com/2024/05/08/yy7VRDAx.jpg',
                    title: '茶类小程序'
                });
            }, 1000);
        });
        return {
            // title: '茶类小程序',
            path: '/page/productDetil/index',
            // imageUrl:this.data.info.img,
            promise
        };
    },
    //分享朋友圈
    onShareTimeline: function () {
        return {
            title: '茶类小程序',
            imageUrl: 'https://img2.imgtp.com/2024/05/08/yy7VRDAx.jpg'
        };
    },
    methods: {
        toSearch(e) {
            uni.navigateTo({
                url: '../cloud/index?type=' + e.currentTarget.dataset.i
            });
        },

        toCall() {
            // this.setData({click:!this.data.click})
            uni.navigateTo({
                url: '../call/index'
            });
        },

        toMore() {
            uni.navigateTo({
                url: '../category/index?type=goods'
            });
        },

        toDetil(e) {
            console.log(e.currentTarget.dataset.i);
            uni.navigateTo({
                url: '../detil/index?type=' + e.currentTarget.dataset.i
            });
        },

        preview(e) {
            uni.previewImage({
                // current:x,
                urls: [this.jplist[e.currentTarget.dataset.index]] //需要预览的图片http链接列表，注意是数组
            });
        },

        //点击加入购物车
        addshopcar(e) {
            // app.watch();
            let shopCar = uni.getStorageSync('carInfo');
            if (shopCar.length != 0) {
                //判断购物车是否存在点击商品
                var result = shopCar.find((v) => {
                    return v.name == e.currentTarget.dataset.i.name;
                });
                if (result) {
                    uni.showToast({
                        title: '该商品已添加'
                    });
                    return;
                } else {
                    shopCar.push(e.currentTarget.dataset.i);
                    getApp().globalData.carNum++;
                    uni.setStorageSync('carInfo', shopCar);
                }
            } else {
                uni.setStorageSync('carInfo', [e.currentTarget.dataset.i]);
                getApp().globalData.carNum++;
            }
            console.log(getApp().globalData.carNum + 'ccc');
            var idx = e.currentTarget.dataset.idx;
            var dstleft = this.dstleft;
            var top;
            var left;
            //根据元素id取得元素坐标
            uni.createSelectorQuery()
                .in(uni)
                .select('#img' + idx)
                .boundingClientRect(function (rect) {
                    left = rect.left; // 节点的左边界坐标
                    top = rect.top; // 节点的上边界坐标
                })
                .exec();
            var that = this;
            var anistr = 'anim[' + idx + ']'; //只修改数组中的单个对象属性的写法
            uni.createSelectorQuery()
                .in(uni)
                .select('#2')
                .boundingClientRect(function (res) {})
                .exec();
            //延时执行是为了等上面取到数据
            setTimeout(function () {
                that.anim[idx]
                    .translate(
                        (dstleft - left + uni.getSystemInfoSync().windowWidth - 100) % uni.getSystemInfoSync().windowWidth,
                        (uni.getSystemInfoSync().windowHeight - top - 60) % uni.getSystemInfoSync().windowHeight
                    )
                    .step();
                //导入动画
                that.setData({
                    [anistr]: that.anim[idx].export()
                });
                //export()方法执行后返回的对象不是animation,所以重新创建一下
                that.setData({
                    [anistr]: uni.createAnimation(),
                    count: (that.count += 1)
                });
                setTimeout(function () {
                    //待进入购物车动画完成后，将圆点位置还原
                    that.anim[idx].translate(0, 0).step({
                        duration: 0
                    });
                    that.setData({
                        [anistr]: that.anim[idx].export()
                    });
                    that.setData({
                        [anistr]: uni.createAnimation()
                    });
                }, 500);
            }, 50);
        },

        goDetail(e) {
            let info = JSON.stringify(e.currentTarget.dataset.i);
            uni.navigateTo({
                url: '../productDetil/index?type=goods&info=' + info
            });
        }
    }
};
</script>
<style>
	.lunbo {
	    width: 100%;
	    height: 240px;
	}
	
	.swiper {
	    height: 200px;
	}
	
	.icons {
	    margin: 10px 0;
	    padding: 10px 10px 0 10px;
	    font-size: 12px;
	    background-color: white;
	    border-radius: 10px;
	}
	
	.searchBox {
	    height: 30px;
	    width: 85%;
	    color: #c4baba;
	    font-size: 12px;
	    border-radius: 15px;
	    position: absolute;
	    top: 60px;
	    background-color: white;
	    padding: 0 10px;
	    z-index: 10;
	    line-height: 30px;
	    vertical-align: middle;
	}
	
	.dengji {
	    position: fixed;
	    right: 28rpx;
	    bottom: 120rpx;
	    z-index: 999999;
	    /* opacity: .8; */
	}
	
	.dengji cover-image {
	    width: 50rpx;
	    height: 50rpx;
	    border-radius: 50%;
	    padding: 5px;
	    background-color: #3fd0aa;
	}
	
	.dengji .cover {
	    width: 50rpx;
	    height: 50rpx;
	    border-radius: 50%;
	    padding: 5px;
	    position: absolute;
	    right: 0;
	    bottom: 0;
	    opacity: 1;
	}
	
	.scale-down-br {
	    animation: scale-down-br 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
	}
	
	@keyframes scale-down-br {
	    0% {
	        transform: scale(1);
	        transform-origin: 100% 100%;
	    }
	
	    100% {
	        transform: scale(0.1);
	        transform-origin: 100% 100%;
	    }
	}
	
	.scale-down-br2 {
	    animation: scale-down-br2 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
	}
	
	@keyframes scale-down-br2 {
	    0% {
	        transform: scale(0.1);
	        transform-origin: 100% 100%;
	    }
	
	    100% {
	        transform: scale(1);
	        transform-origin: 100% 100%;
	    }
	}
	
	.menu {
	    border-radius: 20rpx;
	    display: flex;
	    flex-wrap: wrap;
	    /* flex-direction: row-reverse; */
	}
	
	.btn_c {
	    border-radius: 50%;
	    border: 1px solid orange;
	    width: 21px;
	    height: 21px;
	}
	
	.bg1 {
	    background-color: rgba(0, 255, 128, 0.3);
	}
	
	.bg2 {
	    background-color: rgba(75, 224, 150, 0.3);
	}
	
	.bg3 {
	    background-color: rgba(36, 245, 140, 0.3);
	}
	
	.bg4 {
	    background-color: rgba(39, 122, 81, 0.3);
	}
	
	.bg5 {
	    background-color: rgba(235, 98, 44, 0.3);
	}
	
	.describe {
	    width: 100%;
	    height: 25px;
	    font-size: 16px;
	    align-items: end;
	}
	
	.gradient-text {
	    font-size: 120rpx;
	    font-weight: bold;
	    background: linear-gradient(to bottom, rgba(109, 158, 155, 0.8), rgba(155, 184, 182, 0.1));
	    -webkit-background-clip: text;
	    background-clip: text;
	    color: transparent;
	}
	
	.list {
	    padding: 10px;
	    flex-wrap: wrap;
	}
	
	.list_item {
	    width: 48%;
	    border-radius: 0 0 10px 10px;
	    margin-bottom: 10px;
	    position: relative;
	}
	
	.slide-top {
	    animation: slide-bottom 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
	}
	@keyframes slide-top {
	    0% {
	        transform: translateY(-80px);
	    }
	    100% {
	        transform: translateY(100px);
	    }
	}
	
	.tracking-in-expand-fwd {
	    animation: tracking-in-expand-fwd 4s cubic-bezier(0.215, 0.61, 0.355, 1) both;
	}
	
	@keyframes tracking-in-expand-fwd {
	    0% {
	        letter-spacing: -0.9em;
	        transform: translateZ(-1400px);
	        opacity: 0;
	    }
	    40% {
	        opacity: 0.6;
	    }
	    100% {
	        transform: translateZ(0);
	        opacity: 1;
	    }
	}
	
	.icon1 {
	    background-image: url('');
	}
	
</style>
